<template>
  <div id="account_register">
    <!--顶部-->
    <header class="mui-bar mui-bar-nav">
      <a
        style="color: #fff;"
        @tap="close_register"
        class="mui-icon mui-icon-left-nav mui-pull-left"
      ></a>
      <h1 class="mui-title"></h1>
    </header>
    <div class="mui-content">
      <div id="register_rorm">
        <div class="title">快速注册</div>
        <div class="inp phone">
          <input type="text" v-model="phone" placeholder="请输入手机号">
          <span class>+86</span>
        </div>
        <div class="inp">
          <input type="password" v-model="code" placeholder="请输入验证码">
          <input
            type="button"
            name="btn_span"
            class="btn_span"
            @tap="get_msg_func"
            :value="$store.state.common.get_msg_text"
          >
          <!--<span class="btn_span" disabled="disabled">获取验证码</span>-->
          <!--<input type="text" name="btn_sp" class="btn_sp" v-for="item in btn_sp" value="" />-->
        </div>
        <div class="btn" @tap="sub_this">同意协议并注册</div>
      </div>
    </div>
  </div>
</template>


<script>
import phone_msg_ajax from "@/ajax/phone_msg_ajax";
import account_ajax from "@/ajax/account_ajax";
import reg from "@/tools/reg";
export default {
  data() {
    return {
      phone: "",
      code: "",
      server_code: ""
    };
  },
  created() {
    // 初始化获取验证码的按钮文本
    this.$store.commit("get_msg_text_init", "获取验证码");
  },
  watch: {},
  methods: {
    sub_this() {
      if (!this.code) {
        mui.toast("请输入验证码");
        return;
      }
      if (this.code == this.server_code) {
        mui.toast("验证通过");

		this.$store.commit("change_new_pwd_phone", this.phone);
		this.$store.commit("change_new_pwd_type", 'new');
		
        this.$store.commit("open_newpwd_view", true);
      } else {
        mui.toast("验证失败");
      }
    },
    close_register() {
      this.$store.commit("open_register_view", false);

      this.$store.commit("open_login_view", true);
    },

    get_msg_func() {
      if (!this.phone) {
        mui.toast("手机号不能为空");
        return;
      }
      if (!reg.test_phone(this.phone)) {
        mui.toast("请输入正确的手机号");
        return;
      }
      let msg = this.$store.state.common.get_msg_text;
      if (msg == "获取验证码" || msg == "重新获取") {
        // get msg code
        console.log("获取验证码");
        // do_ajax...
        account_ajax.get_msg_code(
          {
            phone: this.phone
          },
          res => {
            this.server_code = res;
          }
        );
        this.$store.commit("start_msg_interval");
      } else {
        mui.toast("验证码已发送");

        // over count ing...
        return;
      }
    }
  }
};
</script>



<style lang="less" scoped>
#account_register {
  min-height: 100vh;
  background: #1c83fc;
  .mui-bar {
    box-shadow: none;
  }
}
ul,
ol {
  list-style: none;
}

body input[type="text"],
ul,
li,
input[type="password"] {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff;
  opacity: 1;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #fff;
  opacity: 1;
}
.mui-bar {
  background: transparent;
}
input::-webkit-input-placeholder {
  color: #fff;
  opacity: 1;
}
.clear {
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  overflow: hidden;
}
/*顶部*/

/*登录表单*/
.mui-content {
  background: transparent;
}
#register_rorm {
  padding: 0 0.906rem/0.625;
  margin-top: 1.333rem/0.625;
}
#register_rorm .title {
  text-align: center;
  color: #fff;
  font-size: 0.8rem/0.625;
  margin: 0 0 2.666rem/0.625 0;
}
#register_rorm .inp {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.88rem/0.625;
  border-bottom: 2px solid #fff;
  margin-bottom: 0.5rem/0.625;
}
#register_rorm .inp input[type="text"],
#register_rorm .inp input[type="password"] {
  width: 5rem/0.625;
  height: 0.6rem/0.625;
  line-height: 0.6rem/0.625;
  background: transparent;
  color: #fff;
  font-size: 0.453rem/0.625;
  text-indent: 0.266rem/0.625;
}
#register_rorm .phone span {
  font-size: 0.44rem/0.625;
  color: #fff;
  display: flex;
  align-items: center;
}
#register_rorm .phone span i {
  font-size: 0.44rem/0.625;
}
#register_rorm .btn_span {
  margin-bottom: 0.5rem;
  color: #353535;
  font-size: 0.32rem/0.625;
  border-radius: 0.26rem/0.625;
  background: #e5e5e5;
  line-height: normal;
  padding: 0.1rem/0.625 0.4rem/0.625;
}
#register_rorm .btn_span:disabled {
  opacity: 1;
}
#register_rorm .ckeck {
  text-align: center;
  margin-bottom: 0.2rem/0.625;
}
#register_rorm .ckeck label {
  font-size: 0.293rem/0.625;
  color: #fff;
}
#register_rorm .ckeck i {
  font-size: 0.293rem/0.625;
  color: #fff;
}
#register_rorm .btn {
  width: 8rem/0.625;
  height: 1.066rem/0.625;
  line-height: 1.066rem/0.625;
  font-size: 0.52rem/0.625;
  color: #fff;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0.1rem/0.625;
  margin-bottom: 0.373rem/0.625;
  margin-top: 1.373rem/0.625;
}
#register_rorm .txt {
  display: flex;
  justify-content: space-between;
}
#register_rorm .txt a {
  font-size: 0.426rem/0.625;
  color: #fff;
  text-decoration: underline;
}
#register_rorm .bottom {
  position: fixed;
  bottom: 1.12rem/0.625;
  width: 8rem/0.625;
  text-align: center;
  color: #fff;
}
#register_rorm .bottom p {
  color: #fff;
  margin-bottom: 0.573rem/0.625;
  font-size: 0.426rem/0.625;
}
#register_rorm .bottom .wx {
  width: 3.706rem/0.625;
  height: 0.786rem/0.625;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  border-radius: 0.2rem/0.625;
  margin: 0 auto;
}
#register_rorm .bottom .wx span {
  color: #fff;
}
#register_rorm .bottom .wx i {
  font-size: 0.48rem/0.625;
  margin-left: 0.133rem/0.625;
}
</style>

